import { createForm } from "@formily/core";
import {
  FormProvider,
  createSchemaField,
  useExpressionScope,
  RecordScope,
} from "@formily/react";

const form = createForm();

const Custom = () => {
  const scope = useExpressionScope();
  return (
    <code>
      <pre>{JSON.stringify(scope, null, 2)}</pre>
    </code>
  );
};

const SchemaField = createSchemaField({
  components: {
    Custom,
  },
  scope: {
    topScope: {
      aa: 123,
    },
  },
});

export default () => (
  <FormProvider form={form}>
    <RecordScope
      getRecord={() => ({ name: "Record Name", code: "Record Code" })}
      getIndex={() => 2}
    >
      <SchemaField scope={{ propsScope: { bb: 321 } }}>
        <SchemaField.String name="custom" x-component="Custom" />
      </SchemaField>
    </RecordScope>
  </FormProvider>
);
